<template>
  <div>
    <!--     剧情简介-->
    <introduce-template :show-all="false" title="剧情简介">
      <p slot="introduce-content" class="plot">
        {{ introduce.movieIntroduce }}
      </p>
    </introduce-template>
    <!--演职人员-->
    <introduce-template
        @toShowAll="toShowAllActor"
        title="演职人员">
      <sn-row-has-two-col :left="5" :right="19" slot="introduce-content">
        <div slot="one-col">
          <sn-text
              font-color="#333"
              :font-size="16"
              text="导演"
              class="margin-bottom-20"/>
          <actor-template
              :actor-image="introduce.director.image"
              :actor-name="introduce.director.name"/>
        </div>
        <div slot="two-col">
          <sn-text
              font-color="#333"
              :font-size="16"
              text="演员"
              class="margin-bottom-20"/>
          <div class="to-flex">
            <actor-template
                v-for="item in introduce.actors"
                :actor-name="item.name"
                :actor-role="item.role"
                :actor-image="item.image"/>
          </div>
        </div>
      </sn-row-has-two-col>
    </introduce-template>
    <!--    奖项-->
    <introduce-template
        v-if="introduce.awards.length > 0"
        @toShowAll="toShowAllAwards"
        title="奖项">
      <award-template
          slot="introduce-content"
          :award="item"
          v-for="item in introduce.awards"/>
    </introduce-template>
    <!--图集 -->
    <introduce-template
        @toShowAll="toShowAllPictures"
        title="图集">
      <introduce-pictures
          :big-picture="introduce.bigPicture"
          :little-pictures="introduce.littlePictures"
          slot="introduce-content">
      </introduce-pictures>
    </introduce-template>
    <!--评论-->
    <introduce-template title="热门短评" :show-all="false" :is-remark="true">
      <introduce-remark-template
          v-for="(item,index) in introduce.remarks"
          :user="item"
          :r-index="index"
          slot="introduce-content"/>
    </introduce-template>
  </div>
</template>

<script>
import IntroduceTemplate
  from "@/views/movie/movie_detail/down_info/introduce/template/IntroduceTemplate";
import ActorTemplate from "@/views/movie/movie_detail/template/ActorTemplate";
import IntroducePictures
  from "@/views/movie/movie_detail/down_info/introduce/template/IntroducePictures";
import IntroduceRemarkTemplate
  from "@/views/movie/movie_detail/down_info/introduce/template/IntroduceRemarkTemplate";
import AwardTemplate from "@/views/movie/movie_detail/down_info/awards/template/AwardTemplate";

export default {
  name: "MovieIntroduce",
  components: {
    IntroduceTemplate,
    ActorTemplate,
    IntroducePictures,
    IntroduceRemarkTemplate,
    AwardTemplate
  },
  data() {
    return {
      introduce: {
        movieIntroduce: '',
        director: {
          name: '',
          image: ''
        },
        actors: [],
        bigPicture: '',
        littlePictures: [],
        awards: [],
        remarks: []
      },
    }
  },
  methods: {
    toShowAllPictures() {
      this.$router.push({name: 'pictures'})
    },
    toShowAllActor() {
      this.$router.push({name: 'actors'})
    },
    toShowAllAwards() {
      this.$router.push({name: 'awards'})
    },
    getIntroduce() {
      //简介
      let introduce = this.$store.getters.getMovieInfoDetail
      this.introduce.movieIntroduce = introduce.movieIntroduce
      //导演
      this.introduce.director = introduce.director
      //演员
      let actors = introduce.movieActors
      if (actors != null) {
        for (let i = 0; i < actors.length; i++) {
          this.introduce.actors.push(actors[i])
        }
      }
      //奖项
      let awards = introduce.awards
      if (awards != null) {
        if (awards.length > 1) {
          for (let i = 0; i < 2; i++) {
            this.introduce.awards.push(awards[i])
          }
        } else if (awards.length === 1) {
          this.introduce.awards.push(awards[0])
        }
      }
      //图集
      let pictures = introduce.pictures
      if (pictures != null) {
        this.introduce.bigPicture = pictures[0]
        for (let i = 0; i < pictures.length; i++) {
          this.introduce.littlePictures.push(pictures[i])
        }
      }
      //短评
      let remarks = introduce.remarks
      for (let i = 0; i < remarks.length; i++) {
        this.introduce.remarks.push(remarks[i])
      }
    }
  },
  created() {
    this.getIntroduce()
  }
}
</script>

<style scoped>
.plot {
  color: #999;
  font-size: 14px;
  line-height: 30px;
}
</style>